<template>
  <el-drawer :visible.sync="selfVisible" :size="size" :direction="direction" @close="onDialogHide" :with-header="false" :title="title" :wrapper-closable="false">
    <div class="drawer-wrapper">
      <div class="drawer-header">
        <div class="left">
          <!-- <el-button @click="onDialogHide" type="primary" plain>关闭</el-button> -->
        </div>
        <span class="title">{{ title }}</span>
        <div class="right"><slot name="headerRight"></slot></div>
      </div>
      <div class="drawer-body">
        <slot></slot>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "drawer",
  props: {
    title: { type: String, default: "" },
    visible: { type: Boolean, default: false },
    direction: { type: String, default: "rtl" },
    size: { type: String, default: "50%" },
  },
  data() {
    return {
      selfVisible: false,
    };
  },
  watch: {
    visible(visible) {
      this.selfVisible = visible;
    },
  },
  methods: {
    onDialogHide() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.drawer-wrapper {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: #323232;
    height: 36px;
    padding: 10px;
    background: #3a64d3;

    .left,
    .right {
      width: 120px;
    }

    .title {
      font-size: 22px;
      text-align: center;
      color: #fff;
      letter-spacing: 4px;
    }
  }

  .drawer-body {
    padding: 10px 10px 0;
    flex: 1;
    overflow: hidden;
  }
}
</style>
